<template>
    <div class="knowledge-graph">
      <div class="top_tab">
        <div class="top_tab_item_box">
          <div
          v-for="item in tabList"
          :key="item.index"
          :class="activeIndex == item.index ? 'active' : 'top_tab_item'"
          @click="changeTab(item)"
        >
          {{ item.name }}
        </div>
        </div>
  
      </div>
      <div class="content">
        <div v-if="activeIndex == 0">
          <TreeGraph :treeData="graphData" />
        </div>
        <div v-if="activeIndex == 1">
          <CycleGraph :graphData="graphData" />
        </div>
        <div v-if="activeIndex == 2">
          <GridChart :graphData="graphData" />
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import TreeGraph from "./KnowledgeGraphItem/TreeGraph.vue";
  import GridChart from "./KnowledgeGraphItem/GridChart.vue";
  import CycleGraph from "./KnowledgeGraphItem/CycleGraph.vue";
  import knowledgeGraph from '@/api/knowledgeGraph'
  export default {
    name: 'KnowledgeGraph',
    data() {
      return {
        activeIndex: 0,
        tabList: [
          {
            name: "树图",
            index: 0,
          },
          {
            name: "环图",
            index: 1,
          },
          {
            name: "网图",
            index: 2,
          },
        ],
        graphData: {}
      };
    },
    components: {
      TreeGraph,
      GridChart,
      CycleGraph,
    },
    created() {
      this.initData()
    },
    methods: {
      changeTab(item) {
        this.activeIndex = item.index;
      },
      initData(){
        knowledgeGraph.getKnowledgeGraph(1,10).then((res)=>{
          console.log('父组件初始数据',res);
          if (res && res.data && res.data.length > 0) {
            // 如果返回的是数组，取第一个元素作为根节点
            this.graphData = res.data[0]
          } else {
            // 如果没有数据，提供一个默认的空对象
            this.graphData = {
              name: '暂无数据',
              children: []
            }
          }
        }).catch(error => {
          console.error('获取知识图谱数据失败:', error)
          // 发生错误时也提供一个默认的空对象
          this.graphData = {
            name: '加载失败',
            children: []
          }
        })
      }
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .knowledge-graph {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .top_tab {
      width: 100%;
      height: 70px;
      box-sizing: border-box;
      padding: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(245, 246, 251);
      // background: rgb(201,214,255);
      // background: linear-gradient(90deg, rgba(201,214,255,1) 0%, rgba(226,226,226,1) 100%);
      .top_tab_item {
        width: 100px;
        height: 35px;
        background-color: #fff;
        cursor: pointer;
        border-radius: 5px;
        text-align: center;
        line-height: 35px;
      }
    }
  }
  .active {
    background-color: #007aff;
    color: #fff;
    width: 100px;
    height: 35px;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    line-height: 35px;
  }
  .content{
    width: 100%;
    height: calc(100% - 50px);
  }
  .top_tab_item_box{
    width: auto;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    background-color: #fff;
    border-radius: 5px;
  }
  </style>
  